<!DOCTYPE html>
<html>
  <head>
    <meta name="author" content="Ron B. Yeh" />
    <link rel="stylesheet" href="styles.css" />
    <script src="compare.js"></script>
    <script type="module">
      // Image Diff: https://github.com/mapbox/pixelmatch
      import pixelmatch from 'https://cdn.skypack.dev/pixelmatch@5.3.0';
      document.addEventListener('DOMContentLoaded', () => {
        app(pixelmatch);
      });
    </script>
  </head>
  <body>
    <!-- OVERLAY -->
    <div id="drop-target-overlay">
      <div id="drop-target-images">images/</div>
      <div id="drop-target-current"></div>
      <div id="drop-target-reference"></div>
    </div>
    <!-- HELP SCREEN -->
    <p id="help-text" style="display: none">
      <code>vexflow/build/images/</code> contains these folders:<br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>current/</code><br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>diff/</code><br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>reference/</code><br /><br />
      Use these commands to generate the necessary images:<br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>grunt reference</code><br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>grunt generate:current</code><br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>grunt generate:reference</code><br /><br />
      Shortcuts:<br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>CTRL + SHIFT + I</code> - select the <code>images/</code> folder. This folder needs
      to contain <code>current/</code> and <code>reference/</code> subfolders.<br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>CTRL + SHIFT + C</code> - select the <code>current/</code> folder. This can be any
      folder, and does not need to be named "current". This allows you to choose arbitrary folders to compare (e.g.,
      from two different repos).<br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>CTRL + SHIFT + R</code> - select the <code>reference/</code> folder. This can be any
      folder, and does not need to be named "reference". This allows you to choose arbitrary folders to compare (e.g.,
      from two different repos).<br /><br />

      &nbsp;&nbsp;&nbsp;&nbsp;<code>1</code> - Show images side-by-side<br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>2</code> - Flip between current / reference image. Use LEFT | RIGHT arrow keys.<br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>3</code> - Stack / Overlay the current / reference images on top of each other. The
      top image is translucent with 50% opacity. Use LEFT | RIGHT arrow keys to change the order.<br />
      &nbsp;&nbsp;&nbsp;&nbsp;<code>4</code> - Show an image diff. Red regions highlight the differing pixels. Use LEFT
      | RIGHT arrow keys to adjust the threshold for the diff.<br />
      <br /><br />
      Use the text box to quickly search for images to compare (not case sensitive). Separate multiple search terms with
      spaces. To exclude a term, prefix it with an exclamation point, e.g., <code>!bravura</code><br /><br />
      <button onclick="hideHelpText(); return false;">I'M DONE READING</button>
    </p>
    <a id="help-button" href="#" onclick="showHelpText(); return false;">???</a>
    <!-- INFORMATION -->
    <p>
      Click to open:
      <a id="chooseImagesFolder" href="#"><code>vexflow/build/images/</code></a> If a "Let site view files?" pop-up
      appears, choose <b>View Files</b>.
    </p>
    <p>
      You can also drag &amp; drop the <code>vexflow/build/images/</code> or <code>current/</code> or
      <code>reference/</code> folders onto this page.
    </p>
    <p>
      Number Keys: <b>1, 2, 3, 4</b> - Change view modes (side-by-side | alternate | stacked | diff).<br />
      Arrow Keys: <b>UP / DOWN</b> - Select the previous / next image in the list. <b>LEFT / RIGHT</b> - Flip between
      current / reference images, in alternating or stacked view modes.
    </p>
    <!-- SEARCH BOX -->
    <div class="centered">
      <input
        id="filter"
        type="text"
        placeholder="Search terms separated by spaces. Use ! to exclude a term. Case insensitive. For example: bach !bravura"
        onkeyup="filterResults()"
      /><br />
    </div>
    <!-- HEADER / LABELS -->
    <div class="centered">
      <div id="labelCurrent" class="label">
        <a id="chooseCurrentFolder" href="#"></a>
      </div>
      <div id="labelReference" class="label">
        <a id="chooseReferenceFolder" href="#"></a>
      </div>
    </div>
    <!-- LIST OF IMAGES -->
    <div class="centered">
      <select id="selectBoxCurrent" size="2" onchange="if (this.selectedIndex > -1) selectedCurrentImage();"></select>
      <select
        id="selectBoxReference"
        size="2"
        onchange="if (this.selectedIndex > -1) selectedReferenceImage();"
      ></select>
    </div>
    <!-- IMAGE VIEWER -->
    <div id="images" class="centered"></div>
    <!-- OVERLAY -->
    <div id="status">
      <div id="status-image-name"></div>
      <div id="status-view-mode">View Mode: Stacked</div>
    </div>
  </body>
</html>
